<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="开始" @click="move"/>
			<input type="button" value="停止" @click="stop"/>
			<h3>{{msg}}</h3>
		</div>
		<script type="text/javascript">
			new Vue({ 
				el:"#app",
				data:{
					msg:"中华人-民共和国",
					time:null
				},
				methods:{
					move:function(){
						if(this.time!=null) return;
						this.time=setInterval(()=>{
							var start=this.msg.substring(0,1)
							var end =this.msg.substring(1)
							this.msg=end+start
						},400)
					},
					stop:function(){
						clearInterval(this.time);
						this.time=null
					}
				}
			});
		</script>
	</body>
</html>
